<template>
	<view>
		<view class="demo">
			<view class="divs"  v-for="(item,index) in dataList" :key="index">
				<view class="demo_top">
					<view class="demo_top_left">
						<view class="imgbox">
							<view class="img" :style="{ backgroundImage: 'url(' + item.img + ')' }"></view>
							<view class="wear" style="background-color: red;">
								<div class="text" style="color: green;">{{item.wear}}</div>
							</view>
						</view>
					</view>
					<view class="demo_top_right">
						<view class="left">
							<h4 style="margin-left: 5vw;">{{item.name}}</h4>
							<p style="margin-left: 5vw;margin-top: 14vw;font-size: 5vw;color: #f0842a;">￥{{item.price}}</p>
						</view>
						<view class="right">
						<button style="width: 15vw; height: 7vw; font-size: 3vw;color: aliceblue;background-color: #f0842a;">购买</button>
						</view>
					</view>
				</view>
			</view>
			<p style="color: #ccc; font-size: 4vw;">没有更多了</p>
		</view>
	</view>
</template>

<script>
	export default {
		data() {
			return {
			dataList: [{
				img: "https://market.fp.ps.netease.com/file/65f5765efb0ac8380700d6cd1r9cyG1o05",
				name: "沙漠之鹰 | 印花集合",
				wear: "久经沙场",
				price: 1000,
				sum: 98,
				type: 1
			}, {
				img: "https://market.fp.ps.netease.com/file/65f574c687df095d789e1b48KwWjPBpp05",
				name: "M4A1 | 反冲精英",
				wear: "崭新出场",
				price: 724,
				sum: 118,
				type: 2
			}, {
				img: "https://market.fp.ps.netease.com/file/65f811f5f30819e4ff7c0f86YcBUz80B05",
				name: "求生匕首 | 夜色",
				wear: "久经沙场",
				price: 1000,
				sum: 98,
				type: 3
			}, {
				img: "https://market.fp.ps.netease.com/file/65f57cfd4a1277d13463b336NCAkQfVG05",
				name: "AK47 | 红线",
				wear: "久经沙场",
				price: 1000,
				sum: 98,
				type: 4
			}, {
				img: "https://market.fp.ps.netease.com/file/65f5783aa0c9e838d0af55c9VcKdKQru05",
				name: "USB 消音版 | 印花集",
				wear: "久经沙场",
				price: 1000,
				sum: 98,
				type: 1
			}, {
				img: "https://market.fp.ps.netease.com/file/65f586d1efa1308ed245b0bdqPqz4e5y05",
				name: "AWP | 树奎",
				wear: "久经沙场",
				price: 1000,
				sum: 98,
				type: 2
			}]	
			}
		},
		methods: {
			
		}
	}
</script>

<style>
	.demo{
		width: 100vw;
		height: 90vh;
		background-color: #ffffff;
		display: flex;
		flex-direction: column;
		align-items: center;
	}
	.divs{
		width: 90%;
		height: 35vw;
		background-color: #ffffff;
		border-top: 1px solid #ccc;
	}
	.demo_top{
		width: 100%;
		height: 25vw;
		margin-top: 3vw;
		display: flex;
	}
	.demo_top_left{
		width: 30%;
		height: 25vw;
		
	}
	.demo_top_right{
		width: 70%;
		height: 25vw;
		display: flex;
	}
	.left{
		width: 70%;
		height: 100%;
	}
	.right{
		width: 30%;
		height: 100%;
	}
	.imgbox{
		
			width: 100%;
			height: 100%;
			background-image: linear-gradient(to top, #999999, #ccc);
			position: relative;
		
			.img {
				width: 100%;
				height: 25vw;
				background-size: contain;
				background-position: center;
				background-repeat: no-repeat;
			}
		
			.wear {
				position: absolute;
				width: 15vw;
				height: 5vw;
				top: 0;
				left: 0;
				display: flex;
				justify-content: right;
		
				.text {
					width: 13vw;
					height: 5vw;
					background-color: black;
					font-size: 3vw;
					display: flex;
					justify-content: center;
					align-items: center;
					font-weight: bold;
				}
			}
		
	}
</style>
